<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - ECharts配置管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-light">
    <div class="container">
        <div class="row justify-content-center mt-5">
            <div class="col-md-6">
                <div class="card shadow">
                    <div class="card-body p-5">
                        <h2 class="text-center mb-4">注册账号</h2>
                        <div id="alert-container"></div>
                        <form id="register-form">
                            <div class="mb-3">
                                <label for="username" class="form-label">用户名</label>
                                <input type="text" class="form-control" id="username" required minlength="3" maxlength="50">
                                <div class="form-text">用户名长度需在3-50个字符之间</div>
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="email" required>
                            </div>
                            <div class="mb-3">
                                <label for="password" class="form-label">密码</label>
                                <input type="password" class="form-control" id="password" required minlength="6">
                                <div class="form-text">密码长度至少为6个字符</div>
                            </div>
                            <div class="mb-3">
                                <label for="confirm-password" class="form-label">确认密码</label>
                                <input type="password" class="form-control" id="confirm-password" required>
                            </div>
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">注册</button>
                            </div>
                        </form>
                        <div class="text-center mt-3">
                            <p>已有账号？ <a href="login.html">登录</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 检查是否已登录
            const token = localStorage.getItem('token');
            if (token) {
                // 验证令牌有效性
                fetch('/api/auth/me', {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                })
                .then(response => {
                    if (response.ok) {
                        // 令牌有效，重定向到主页
                        window.location.href = 'index.html';
                    }
                })
                .catch(error => {
                    console.error('验证令牌失败:', error);
                    // 清除无效令牌
                    localStorage.removeItem('token');
                });
            }

            // 注册表单提交
            const registerForm = document.getElementById('register-form');
            const alertContainer = document.getElementById('alert-container');

            registerForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const username = document.getElementById('username').value;
                const email = document.getElementById('email').value;
                const password = document.getElementById('password').value;
                const confirmPassword = document.getElementById('confirm-password').value;
                
                // 验证密码匹配
                if (password !== confirmPassword) {
                    showAlert('两次输入的密码不匹配', 'danger');
                    return;
                }
                
                // 发送注册请求
                fetch('/api/auth/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, email, password })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 显示成功消息
                        showAlert('注册成功！正在跳转到登录页面...', 'success');
                        
                        // 跳转到登录页面
                        setTimeout(() => {
                            window.location.href = 'login.html';
                        }, 2000);
                    } else {
                        // 显示错误消息
                        showAlert(data.message || '注册失败，请稍后再试', 'danger');
                    }
                })
                .catch(error => {
                    console.error('注册请求失败:', error);
                    showAlert('注册请求失败，请稍后再试', 'danger');
                });
            });

            // 显示提示消息
            function showAlert(message, type) {
                alertContainer.innerHTML = `
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `;
            }
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>